<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智慧校园</title>
    <!-- 引入资源 -->
    <!-- 引入css相关资源  -->
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
    <!-- 引入js 相关的资源 -->
    <script>
      window._AMapSecurityConfig = {
        securityJsCode: '7d2d9accb7d38744e2a2e08d96bcea79',
      };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script src="./js/store.js"></script>
  </head>
  <body>
    <!-- 创建地图容器 -->
    <div id="container"></div>
    <div class="info">点击地图标注热门地点</div>
    <script>
      AMapLoader.load({
        key: '086ec8679a65c0d8de2097e74c4f2758', //申请好的Web端开发者 Key，调用 load 时必填
        version: '2.0', //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          // 创建地图对象
          const map = new AMap.Map('container', {
            center: [114.402673, 30.518987], //设置地图中心点的经纬度
            zoom: 16, //地图的缩放比例（3~20）
            viewMode: '3D',
            pitch: 45,
          });
          // 使用控件
          AMap.plugin(
            [
              'AMap.ToolBar', //ToolBar （工具条）：集成了缩放，平移，定位
              'AMap.Scale', // Scale (比例尺):展示在当前层级和经纬度下的比例
              'AMap.ControlBar', //ControlBar
            ],
            function () {
              //添加控件
              map.addControl(new AMap.ToolBar());
              map.addControl(new AMap.Scale());
              map.addControl(new AMap.ControlBar());
            }
          );



          // 监听地图的点击事件
          map.on('click', function (e) {
            var marker = new AMap.Marker({
              position: e.lnglat,
            });
            map.add(marker);
          });
        })
        .catch((e) => {
          console.error(e); //加载错误提示
        });
    </script>
  </body>
</html>
